<template>
  <el-card class="box-card" style="margin:10px;">
    <div slot="header" class="clearfix">
      <el-row>
        <el-col :span="20">
          <div style="font-size:22px" align="left">
            <h1 style="font-size: 24px;color: #409eff;">{{ routeData.processName }}</h1>
          </div>
        </el-col>
        <el-col :span="4">
          <div align="right">
            <el-button size="small" type="primary" icon="el-icon-back" @click="back">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <iframe ref="iframe" width="100%" :height="windowHeight" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" :src="src" />
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      src: null,
      windowHeight: document.documentElement.clientHeight + 100,
      loading: false,
      routeData: this.$route.params
    }
  },
  mounted() {
    this.formConfig = this.routeData.content || ''
    window.onresize = () => {
      this.windowHeight = document.documentElement.clientHeight + 100
    }
    this.getFlowUrl()
    window.addEventListener('message', this.handleMessage)
    // { processKey: row.id, processName: row.name, processId: row.flowKey, tenantId: row.systemId }
  },
  destroyed() {
    window.removeEventListener('message', this.handleMessage)
  },
  methods: {
    getFlowUrl() {
      this.$axios.get(this.basePortalUrl + '/system/getById/' + this.routeData.tenantId)
        .then(res => {
          this.src = res.data.data.flowUrl + '?processKey=' + this.routeData.processKey + '&processId=' + this.routeData.processId + '&tenantId=' + this.routeData.tenantId + '&token=' + localStorage.getItem('token')
        }).catch(() => {
          this.loading = false
          this.$message.error('获取模板列表失败')
        })
    },
    handleMessage(res) {
      if (res && res.data && res.data.key) {
        if (res.data.key === 'flowTemplateData') {
          this.handleSave(res.data.msg)
        } else if (res.data.key === 'flowEditPageLoaded') {
          this.$refs.iframe.contentWindow.postMessage({ key: 'flowTemplateEditData', data: localStorage.getItem('flowTemplate') }, '*')
        }
      }
    },
    // 保存bpmn文件数据
    handleSave(data) {
      console.log(data)
      const body = { tenantId: this.routeData.tenantId, processKey: this.routeData.processKey, name: this.routeData.processName, bpmnXml: data.processXml }
      if (data.processId) {
        body.modelId = data.processId
      }
      const that = this
      this.$axios.post(this.baseFlowUrl + '/model/save', body)
        .then(res => {
          if (res.data.code === 200) {
            that.$message.success('保存成功！')
            this.$router.push('/process/designList')
          }
        }).catch((e) => {
          console.error(e)
          that.$message.error('获取流程模型数据失败')
        })
    },
    back() {
      var params = {
      }
      this.$router.push({ name: 'designList', params: params })
    }
  }
}
</script>
